<template>
  <div class="shop_class">
    <!-- 导航条 -->
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-sidebar v-model="active">
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
    </van-sidebar>


    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active" ref="barheight">
      <van-tabbar-item icon="wap-home-o" name="shop-home" replace to="shop-home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" name="shop-class" replace to="shop-class">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" name="shop-buys" replace to="shop-buys">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" name="shop-ours" replace to="shop-ours">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import { ref, onMounted } from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import { useWindowSize, useRect } from '@vant/use';
export default {
  setup() {
    // 导航条 - 返回
    const onClickLeft = () => history.back();
    // Tabbar 标签栏 - 选中
    const active = ref('shop-class');
    // 获取浏览器窗口的视口宽度和高度
    const { width, height } = useWindowSize();

    const ijheight = height;
    const barheight = ref();

    onMounted(() => {
      const rect = useRect(barheight);
      console.log(rect); 
    });

    return {
      onClickLeft,
      active,
      barheight,
    };
  },


};
</script>

<style>

</style>